<template>
  <div style="background: #f2f2f2;padding: 15px;height: 100%;">
    <div>
      <el-row>
        <el-col :span="24">
          <base-card title="常用功能">
            <ul>
              <li>
                <div class="icon-wrapper">
                  <i class="el-icon-setting my-setting"></i>
                </div>
                <span>我的日程</span>
              </li>
              <li>
                <div class="icon-wrapper">
                  <i class="el-icon-setting my-setting"></i>
                </div>
                <span>考勤统计</span>
              </li>
              <li>
                <div class="add-wrapper">
                  <i class="el-icon-plus my-add"></i>
                </div>
                <span>添加</span>
              </li>
            </ul>



          </base-card>
        </el-col>
      </el-row>
    </div>
    <div style="margin-top: 15px;">
      <el-row :gutter="16">
        <el-col :span="18">
          <BaseCard title="导航">
            <div style="width: 100%;height: 300px;"></div>
          </BaseCard>
        </el-col>
        <el-col :span="6">
          <div class="baseCardList">
            <base-card title="相关单据">
              <div style="width: 100%;height: 60px;"></div>
            </base-card>
          </div>
          <div class="baseCardList">
            <base-card title="相关列表">
              <div style="width: 100%;height: 60px;"></div>
            </base-card>
          </div>
          <div class="baseCardList">
            <base-card title="相关报表">
              <div style="width: 100%;height: 60px;"></div>
            </base-card>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import BaseCard from "../../components/BaseCard/BaseCard";
  export default {
        name: "index",
      components: {BaseCard}
  }
</script>

<style scoped lang="scss">
  .baseCardList{
    margin-top: 12px;
  }
  .baseCardList:first-child{
    margin-top: 0;
  }
  li {
    float: left;
    margin-left: 15px;
    text-align: center;
    cursor: pointer;
    span{
      padding: 3px;
      margin-top: 5px;
      display: inline-block;
      color: #333333FF;
    }
    .icon-wrapper {
      display: flex;
      width: 60px;
      height: 60px;
      background: rgba(238, 238, 238, 1);
      border-radius: 16px;
      justify-content: center;
      align-items: center;

      .my-setting {
        font-size: 30px;
        color: #999999FF;
      }

    }
    .add-wrapper{
      display: flex;
      width: 60px;
      height: 60px;
      border-radius: 16px;
      justify-content: center;
      align-items: center;
      border: #8b8b8b dashed 1px;
      .my-add{
        font-size: 30px;
      }
    }
  }

</style>
